<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <style type="text/css">
    html,body{
        height: 100%;
    }
    #wrap{
        height: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
    }
    #header{
        height: 50px; 
        text-align: center; 
        background-color: #e62442; 
        color: #fff;
        width: 100%;
        position: relative;
    }
    #header h1{
        font-size: 20px; 
        height: 50px; 
        line-height: 50px; 
        margin: 0em; 
        color: #fff;
    }
    #header .header_btn {
        height: 50px;
        position: absolute;
        right: 0;
        bottom: 0;
        display: none;
        -webkit-box-align: center;
        padding: 0 18px;
    }
    #header .search_btn {
        display: -webkit-box;
    }
    #header .header_btn img {
        width: 19px;
        display: block;
    }
    #main{
        -webkit-box-flex: 1; 
        -webkit-flex: 1;
    }
    #footer{
        height: 30px; 
        line-height: 30px;
        background-color: #81a9c3; 
        width: 100%;
        text-align: center;
    }
    #footer h5{
        color: white;
    }
    .con{
        font-size: 28px; 
        text-align: center;
    }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1>订单</h1>
            <div class="header_btn search_btn" tapmode onclick="fnSearch();">
                <img src="./image/search_icon2.png">
            </div>
            <div class="header_btn add_goods_btn" tapmode onclick="fnAddGoods();">
                <img src="./image/join_us.png">
            </div>
            <div class="header_btn income_btn" onclick="fnIncome();" tapmode>
                <img src="./image/income_icon.png">
            </div>
        </div>
        <div id="main">
                
        </div>
<!--         <div id="footer">
            <h5>Copyright &copy;<span id="year"></span> </h5>
        </div> -->
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
        $api.fixStatusBar(header);
        openSocketFrame();
        shop = $api.getStorage('shop_data');
        if(shop) {
            fnSetNav();
        }else {
            fnLogin();
        }

        api.addEventListener({
            name: 'loginEvent'
        }, function(ret, err) {
            if (ret) {
                shop = $api.getStorage('shop_data');
                fnSetNav();
                NVTabBar.setSelect({
                    index: 0,
                    selected: true,
                });
                $('#header h1').text('订单');
                 api.setFrameGroupIndex({
                    name: 'indexFrameGoup',
                    index: 0,
                });
                 api.sendEvent({
                     name: 'showOrderGroup',
                     extra: {
                     }
                 });
                 api.sendEvent({
                     name: 'fronNavbarEvent',
                     extra: {
                     }
                 });
                 api.setFrameAttr({
                     name: 'my',
                     hidden:true
                 });
                 $('#header .search_btn').css('display', '-webkit-box');
                 $('#header .add_goods_btn').css('display', 'none');
                 $('#header .income_btn').css('display', 'none');
            }
        });

        api.addEventListener({
            name: 'orderChangeEvent'
        }, function(ret, err){
            if( ret ){
                shop = $api.getStorage('shop_data');
                fnSetNav();
                NVTabBar.setSelect({
                    index: 0,
                    selected: true,
                });
                $('#header h1').text('订单');
                 api.setFrameGroupIndex({
                    name: 'indexFrameGoup',
                    index: 0,
                });
                 api.sendEvent({
                     name: 'showOrderGroup',
                     extra: {
                     }
                 });
                 api.sendEvent({
                     name: 'fronNavbarEvent',
                     extra: {
                     }
                 });
                 api.setFrameAttr({
                     name: 'my',
                     hidden:true
                 });
                 $('#header .search_btn').css('display', '-webkit-box');
                 $('#header .add_goods_btn').css('display', 'none');
                 $('#header .income_btn').css('display', 'none');
                 if(ret.value.whereFrom == 'finished'){
                    api.execScript({
                        name: 'root',
                        frameName: 'seller_order',
                        script: 'fnClick("3");'
                    });
                 }else if(ret.value.whereFrom == 'wait_pickup'){
                    api.execScript({
                        name: 'root',
                        frameName: 'seller_order',
                        script: 'fnClick("1");'
                    });
                 }
            }
        });

        api.addEventListener({
            name: 'logoutEvent'
        }, function(ret, err) {
            if (ret) {
                fnLogin();
            }
        });
        //指定 navbar
        api.addEventListener({
            name: 'fronNavbarEvent'
        }, function(ret, err) {
            if (ret) {
                NVTabBar.bringToFront();
            } 
        });
    };

    function fnLogin() {
        api.openWin({
            name: 'login',
            url: './html/login.html',
            slidBackEnabled:false,
            pageParam: {
                fromIndex:1
            }
        });
    }

    function fnSetNav() {
        var header_arr = ['订单','商品','扫码','收入','我'];
        NVTabBar = api.require('NVTabBar');
        var systype = api.systemType;
        if(systype == 'ios'){
            bottomHeight = 25;
        }else{
            bottomHeight = 10;
        }
        NVTabBar.open({
            styles: {
                bg: '#f8f8f8',
                h: 50,
                dividingLine: {
                    width: 0.5,
                    color: '#e6e6e6'
                },
                badge: {
                    bgColor: '#f50',
                    numColor: '#fff',
                    size: 6.0,
                    fontSize:10 //数字类型,设置徽章字体大小,默认10。注意:仅支持iOS。
                }
            },
            items: [{
                w: api.winWidth / 5.0,
                bg: {
                    marginB: -5,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 19.0,
                    h: 19.0,
                },
                icon: {
                    normal: 'widget://image/order.png',
                    highlight: 'widget://image/order_active.png',
                    selected: 'widget://image/order_active.png'
                },
                title: {
                    text: '订单',
                    size: 11.0,
                    normal: '#999999',
                    selected: '#e62442',
                    marginB: 4.0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: -5,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 19.0,
                    h: 19.0,
                },
                icon: {
                    normal: 'widget://image/goods.png',
                    highlight: 'widget://image/goods_active.png',
                    selected: 'widget://image/goods_active.png'
                },
                title: {
                    text: '商品',
                    size: 11.0,
                    normal: '#999999',
                    selected: '#e62442',
                    marginB: 4.0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: bottomHeight,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 55.0,
                    h: 55.0,
                },
                icon: {
                    normal: 'widget://image/scan_nav.png',
                    highlight: 'widget://image/scan_nav.png',
                    selected: 'widget://image/scan_nav.png'
                },
    
            },{
                w: api.winWidth / 5.0,
                bg: {
                    marginB: -5,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 19.0,
                    h: 19.0,
                },
                icon: {
                    normal: 'widget://image/shouru.png',
                    highlight: 'widget://image/shouru_active.png',
                    selected: 'widget://image/shouru_active.png'
                },
                title: {
                    text: '收入',
                    size: 11.0,
                    normal: '#999999',
                    selected: '#e62442',
                    marginB: 4.0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: -5,
                    image: 'rgba(0,0,0,0)'
                },
                iconRect: {
                    w: 19.0,
                    h: 19.0,
                },
                icon: {
                    normal: 'widget://image/my.png',
                    highlight: 'widget://image/my_active.png',
                    selected: 'widget://image/my_active.png'
                },
                title: {
                    text: '我',
                    size: 11.0,
                    normal: '#999999',
                    selected: '#e62442',
                    marginB: 4.0
                }
            }],
            selectedIndex: 0
        }, function(ret, err) {
            if (ret) {
                if(ret.eventType == 'show') {
                    fnIndexFrame();
                }
                if(ret.eventType == 'click' ) {
                    $('#header h1').text(header_arr[ret.index]);
                    if(ret.index == 0) {
                        api.setFrameGroupIndex({
                           name: 'indexFrameGoup',
                           index: 0,
                       });
                        api.sendEvent({
                            name: 'showOrderGroup',
                            extra: {
                            }
                        });
                        api.sendEvent({
                            name: 'fronNavbarEvent',
                            extra: {
                            }
                        });
                        api.setFrameAttr({
                            name: 'my',
                            hidden:true
                        });
                        $('#header .search_btn').css('display', '-webkit-box');
                        $('#header .add_goods_btn').css('display', 'none');
                        $('#header .income_btn').css('display', 'none');
                    }else if(ret.index == 1) {
                       api.setFrameGroupIndex({
                           name: 'indexFrameGoup',
                           index: 1,
                       });
                       api.sendEvent({
                           name: 'hiddenOrderGroup',
                           extra: {
                           }
                       });
                        api.setFrameAttr({
                            name: 'my',
                            hidden:true
                        });
                        $('#header .search_btn').css('display', 'none');
                        //总店才能自己添加商品
                        if(shop['pid'] == 0) {
                            $('#header .add_goods_btn').css('display', '-webkit-box');
                        }
                        $('#header .income_btn').css('display', 'none');
                    }else if(ret.index == 2) {
                        api.openWin({
                            name: 'scan',
                            url: './html/scan.html'
                        });
                    }else if(ret.index == 3) {
                        api.setFrameGroupIndex({
                           name: 'indexFrameGoup',
                           index: 2,
                       });
                       api.sendEvent({
                           name: 'hiddenOrderGroup',
                           extra: {
                           }
                       });
                        api.setFrameAttr({
                            name: 'my',
                            hidden:true
                        });
                        $('#header .search_btn').css('display', 'none');
                        $('#header .add_goods_btn').css('display', 'none');
                        $('#header .income_btn').css('display', '-webkit-box');
                    }else {
                        fnOpenMy();
                        $('#header .search_btn').css('display', 'none');
                        $('#header .add_goods_btn').css('display', 'none');
                        $('#header .income_btn').css('display', 'none');
                    }
                }
                NVTabBar.bringToFront();
            }else{
                return;
            }
        });
    }

    //
    function fnIndexFrame() {
        api.openFrameGroup({
            name: 'indexFrameGoup',
            rect: {
                 x: 0, 
                 y: $('#header').height(), 
                 w: 'auto',
                 h: api.winHeight - $('#header').height() - 50,
            },
            scrollEnabled: false,
            frames: [{
                name: 'seller_order', 
                url: './html/order.html',
                pageParam : {
                    height:$('#header').height(),
                }
            },{
                name: 'goods', 
                url: './html/goods.html',
                bgColor:'#fff',
                bounces:true
            },{
                name: 'income', 
                url: './html/income.html',
                bgColor:'#fff',
                bounces:true
            }]
        }, function(ret, err) {
            if (ret) {
                
            } else {
                
            }
        });

    }

    function fnOpenMy() {
        api.openFrame({
            name: 'my',
            url: './html/my.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: api.winHeight - 50
            },
            bgColor:'#fff',
            bounces: true
        });
    }

    // 搜索订单
    function fnSearch() {
        api.openWin({
            name: 'search',
            url: './html/search.html'
        });
    }

    // 添加商品
    function fnAddGoods() {
        api.openWin({
            name: 'add_goods',
            url: './html/add_goods.html'
        });
    }

    function fnIncome() {
        api.openWin({
            name: 'grant_record',
            url: './html/grant_record.html',
        });
    }

    function openSocketFrame () {
        api.openFrame({
            name: 'socket_frame',
            url: './html/socket_frame.html',
            rect: {
                x: 0,
                y: 0,
                w: 0,
                h: 0
            },
        });
    };
</script>
</html>